<script>
  init({
    title: 'The Events',
    desc: 'Multiple Select has some callback events.',
    links: ['multiple-select.min.css'],
    scripts: ['multiple-select.min.js']
  })
</script>

<style>
select {
  width: 100%;
}
</style>

<div>
  <div class="mb-3 row">
    <label class="col-sm-2">
      Events
    </label>

    <div class="col-sm-10">
      <textarea class="form-control" readonly rows="10"></textarea>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
          <option value="6">Option 6</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  var $log = $('textarea')

  function log(text) {
    $log.append(text)
    $log.scrollTop($log[0].scrollHeight - $log.height())
  }

  function mounted() {
    $('select').multipleSelect({
      filter: true,
      onOpen: function () {
        log('onOpen event fire!\n')
      },
      onClose: function () {
        log('onClose event fire!\n')
      },
      onCheckAll: function () {
        log('onCheckAll event fire!\n')
      },
      onUncheckAll: function () {
        log('onUncheckAll event fire!\n')
      },
      onFocus: function () {
        log('onFocus event fire!\n')
      },
      onBlur: function () {
        log('onBlur event fire!\n')
      },
      onOptgroupClick: function (view) {
        log('onOptgroupClick event fire! view: ' + JSON.stringify(view) + '\n')
      },
      onClick: function (view) {
        log('onClick event fire! view: ' + JSON.stringify(view) + '\n')
      },
      onFilter: function (text) {
        log('onFilter event fire! text: ' + text + '\n')
      },
      onAfterCreate: function () {
        log('onAfterCreate event fire!\n')
      }
    })
  }
</script>
